<template>
    <div class="exclusive">
        <!-- <div class="top clearfix">
            <p @click="classifySearchId=3,getReason()" v-bind:class="{'currt':classifySearchId==3}">新人福利</p>
            <p @click="classifySearchId=4,getReason()" v-bind:class="{'currt':classifySearchId==4}">会员商场</p>
        </div> -->
        <div class="list">
            <ul>
                <li class="clearfix " v-for="product in list" @click="gotoProductDtl(product.id)">
                    <div class="img fl">
                        <img :src="product.picture" alt="">
                    </div>
                    <div class="content fl">
                        <div class="title">
                            <span>{{product.title}}</span>
                        </div>
                        <div class="list clearfix">
                            <div class="left fl">
                                <div class="tops">
                                    <span class="three" v-if="product.classifyId=='3'">新手体验</span>
                                    <span class="four" v-if="product.classifyId=='4'">会员专享</span>
                                </div>
                                <div class="button">
                                    <span class="money">￥{{product.pointPrice}}</span>
                                    <!-- <span class="money" v-if="classifySearchId==4">￥{{product.pointPrice}}</span> -->
                                    <span class="acti">原价￥{{product.originalPrice}}</span>
                                </div>
                            </div>
                            <div class="right fl">
                                <div class="btn">
                                    <span>立即购买</span>
                                </div>
                            </div>

                        </div>
                    </div>
                </li>
            </ul>
            <div class="taps" @click="pageTurning" v-if="isLastPage==false">点击加载更多</div>
        </div>

    </div>
</template>

<script>
import http from "@/assets/js/axios";
import axios from 'axios'
import { domain } from '@/assets/js/config'
import $ from 'jquery'
import Qs from 'qs'
import { maskTips } from '@/assets/js/dom'
export default {
    data() {
        return {
            list: [],
            isLastPage: '',
            pgnum: 1,
            pageSize: 6,
            total: 56,
            pages: 10,
            classifySearchId: 3,
        }
    },
    components: {

    },
    mounted() {
        let userToken = localStorage.getItem("token") || ''
        this.userToken = userToken
        this.getReason();
    },
    methods: {
        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },
        // 商品列表
        getReason: async function () {
            this.pgnum = 1;
            let postDo = {
                'classifySearchId': this.classifySearchId,
                'pageNum': 1,
                "pageSize": this.pageSize
            };
            const res = await http.post('xshk/f/frontCommodity/list', postDo)
            // console.log(res);

            // console.log(postDo);
            if (res.data.code == -5) {
                maskTips({ id: "bal-fail", txt: res.data.message })
                this.$router.push('/login')
                return false;
            }
            if (res.data.code == 0) {
                this.list = res.data.data.list
                this.isLastPage = res.data.data.isLastPage
            }
        },
        // 改变页数
        pageTurning: async function () {
            var that = this
            that.pgnum++
            let postDo = {
                'classifySearchId': this.classifySearchId,
                'pageNum': that.pgnum,
                "pageSize": that.pageSize
            };
            // console.log(postDo);
            const res = await http.post('xshk/f/frontCommodity/list', postDo)
            // console.log(res);
            if (res.data.code == 0) {
                this.isLastPage = res.data.data.isLastPage
                var size = res.data.data.pageSize
                this.list = this.list.concat(res.data.data.list)

            }
        },
        gotoProductDtl: function (pid, pig) {
            this.$router.push({ path: '/njxdetails', query: { 'id': pid } })
        }

    }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/css/mixins.styl';

.exclusive {
    background-color: #eee;
    height: 100%;

    .top {
        background-color: #fff;
        width: 100%;
        font-size: 18px;
        color: #000;
        text-align: center;

        p {
            width: 50%;
            height: 50px;
            line-height: 50px;
            float: left;
            text-align: center;
        }

        p.currt {
            border-bottom: 5px solid #8ebf25;
        }
    }

    .list {
        padding-bottom: 70px;
        width: 100%;
        background-color: #eee;
        padding-top: 10px;

        ul {
            li {
                width: 90%;
                margin: 0 auto;
                background-color: #fff;
                margin-top: 10px;
                border-radius: 8px;

                div.img {
                    width: 120px;
                    height: 120px;
                    background-color: #ccc;
                    border-radius: 8px;

                    img {
                        border-radius: 8px;
                        width: 100%;
                        height: 100%;
                    }
                }

                div.content {
                    margin-left: 10px;
                    width: 200px;

                    div.title {
                        height: 45px;
                        font-size: 13px;
                        color: #00;
                        padding: 5px 0;

                        .acti {
                            text-decoration: line-through;
                        }
                    }

                    div.list {
                        font-size: 13px;
                        color: #00;
                        padding: 5px 0;
                        background-color: #fff;

                        div.left {
                            width: 100%;

                            div.tops {
                                span {
                                    font-size: 12px;
                                    padding: 2px 5px;
                                    color: #fff;
                                }

                                span.three {
                                    border: 1px solid #8ebf25;
                                    background-color: #8ebf25;
                                }

                                span.four {
                                    border: 1px solid #ff9a30;
                                    background-color: #ff9a30;
                                }
                            }

                            div.button {
                                margin-top: 5px;

                                .money {
                                    font-size: 20px;
                                    color: #ff0000;
                                }

                                .acti {
                                    margin-left: 5px;
                                    font-size: 12px;
                                    color #999;
                                    text-decoration: line-through;
                                }
                            }
                        }

                        .right {
                            position: relative;

                            .btn {
                                position: absolute;
                                top: 15px;
                                right: 5px;
                                width: 60px;
                                height: 25px;
                                line-height: 23px;
                                border: 1px solid #ff0000;
                                border-radius: 3px;
                                text-align: center;
                                background-color: #ff0000;

                                span {
                                    font-size: 12px;
                                    color: #fff;
                                }
                            }
                        }
                    }
                }
            }
        }

        .taps {
            padding-top: 20px;
            width: 100%;
            height: 30px;
            font-size: 18px;
            color: #666;
            line-height: 30px;
            text-align: center;
            padding-bottom: 50px;
            background-color: #eee;
        }
    }
}
</style>
